Skip to content

Avoid two monaco-editor instances on CDN bundlers#4308

Closed
trevor-scheer wants to merge 9 commits into
mainfrom
release/cdn-fix-alpha
Closed

Avoid two monaco-editor instances on CDN bundlers#4308
trevor-scheer wants to merge 9 commits into
mainfrom
release/cdn-fix-alpha

Conversation

@trevor-scheer

Copy link
Copy Markdown
Contributor

Summary

Alpha release branch for the @graphiql/react monaco fix. In changesets
pre-mode under the alpha dist-tag so the fix publishes as
0.37.6-alpha.N for esm.sh validation before landing on main under
latest. Substantive change is in the second commit; see its body and
#4303.

Plan

  • Merge the auto-opened "Version Packages (alpha)" PR (will appear
    against this branch once the Release workflow finishes) to
    publish @graphiql/react@0.37.6-alpha.0.
  • Pin the alpha in a copy of examples/graphiql-cdn/index.html and
    load in a browser: no Cannot set tokens provider for unknown language json exception, GraphQL syntax colors render, and
    completion fires.
  • On success: exit pre-mode and land the fix on main via a clean
    PR for the final 0.37.6 release.

Temporary pre-mode on this release branch so changesets versions the
pending fix as a `0.37.6-alpha.N` prerelease published under the
`alpha` dist-tag. Exit once the alpha validates against esm.sh and the
fix lands on `main`.
The monaco store previously imported `monaco-graphql/esm/monaco-editor.js`,
a re-export module that both registers monaco-editor language
contributions and re-exports the lean monaco-editor namespace. esm.sh's
standalone bundler splits that file in a way that leaves consumers with
two monaco-editor instances: one with `graphql` and `json` registered,
one without. The lazily-loaded tokenizer runs against the unregistered
instance and throws `Cannot set tokens provider for unknown language
json` on CDN setups, breaking syntax highlighting and completion.

Inline the language contribution side effects and the lean monaco-editor
entry directly, so there is no re-export module for the bundler to
split. Single instance, all three languages.

Refs #4303.
@changeset-bot

changeset-bot Bot commented May 19, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6204807

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Field was set as `typings: esm/index.d.ts`, pointing at the ESM build
output. The ESM build is emitted by a separate tsgo invocation that
doesn't coordinate with the CJS project reference graph that workspace
dependents (e.g. `graphql-language-service-cli`) walk. `tsc` tolerated
the misalignment by silently falling back to `dist/index.d.ts` next to
`main`; `tsgo` (cut over in #4274) resolves project references more
strictly and surfaces the gap as "Could not find a declaration file"
during cold builds, breaking CI when a release branch's `ci:version`
invokes a from-scratch `yarn build`.

Switch to the modern `types` field name pointing at `dist/index.d.ts`,
matching the sibling `graphql-language-service` package.
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to
release/cdn-fix-alpha, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`release/cdn-fix-alpha` is currently in **pre mode** so this branch has
prereleases rather than normal releases. If you want to exit
prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## graphiql@5.2.4-alpha.0

### Patch Changes

- Updated dependencies
\[[`5f44a27`](5f44a27)]:
    -   @graphiql/react@0.37.6-alpha.0
    -   @graphiql/plugin-doc-explorer@0.4.3-alpha.0
    -   @graphiql/plugin-history@0.4.3-alpha.0

## @graphiql/plugin-code-exporter@5.1.3-alpha.0

### Patch Changes

- Updated dependencies
\[[`5f44a27`](5f44a27)]:
    -   @graphiql/react@0.37.6-alpha.0

## @graphiql/plugin-doc-explorer@0.4.3-alpha.0

### Patch Changes

- Updated dependencies
\[[`5f44a27`](5f44a27)]:
    -   @graphiql/react@0.37.6-alpha.0

## @graphiql/plugin-explorer@5.1.3-alpha.0

### Patch Changes

- Updated dependencies
\[[`5f44a27`](5f44a27)]:
    -   @graphiql/react@0.37.6-alpha.0

## @graphiql/plugin-history@0.4.3-alpha.0

### Patch Changes

- Updated dependencies
\[[`5f44a27`](5f44a27)]:
    -   @graphiql/react@0.37.6-alpha.0

## @graphiql/react@0.37.6-alpha.0

### Patch Changes

- [#4308](#4308)
[`5f44a27`](5f44a27)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix syntax
highlighting and autocompletion when GraphiQL is loaded from a CDN such
as esm.sh.

The monaco store previously imported
`monaco-graphql/esm/monaco-editor.js`, a re-export module that both
registers monaco-editor language contributions and re-exports the lean
monaco-editor namespace. Some CDN bundlers (esm.sh's `?standalone` mode
in particular) split that file in a way that leaves the consumer with
two monaco-editor instances: one with the `graphql` and `json` languages
registered, and one without. The lazily-loaded json/graphql tokenization
runs against the unregistered instance and throws `Cannot set tokens
provider for unknown language json`, breaking syntax highlighting and
completion.

The store now imports the language contribution side effects and the
lean monaco-editor entry directly, so there is no re-export module for
the bundler to split. Behavior is unchanged for npm-installed consumers
using a bundler (Vite, webpack, Rollup, Next.js); module deduplication
already produced a single instance there.

## graphql-language-service-cli@3.5.1-alpha.0

### Patch Changes

- Updated dependencies
\[[`e46fc55`](e46fc55)]:
    -   graphql-language-service-server@2.14.10-alpha.0

## graphql-language-service-server@2.14.10-alpha.0

### Patch Changes

- [#4308](#4308)
[`e46fc55`](e46fc55)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Point the
package's `types` field at `dist/index.d.ts`, matching the CJS build
output. The previous `typings: esm/index.d.ts` referenced the ESM
build's output, which is emitted by a separate tsgo invocation that
doesn't coordinate with the CJS project reference graph dependents rely
on. `tsc` tolerated the misaligned path by falling back to
`dist/index.d.ts` next to `main`; `tsgo` resolves project references
more strictly and surfaced the misalignment as a "Could not find a
declaration file" error during cold builds.

## vscode-graphql@0.13.6-alpha.0

### Patch Changes

- Updated dependencies
\[[`e46fc55`](e46fc55)]:
    -   graphql-language-service-server@2.14.10-alpha.0

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
#4211 added `*.css` to `@graphiql/react`'s `sideEffects` to keep webpack
from tree-shaking `import 'graphiql/style.css'`. The glob landed in
0.37.4 alongside esm.sh's `?standalone` builder starting to emit a
115-line preload stub that fragments `monaco-editor` into two instances
and breaks syntax highlighting on CDN consumers (#4303).

Remove the glob to narrow the package.json delta between the
last-working `0.37.3` and the first-broken `0.37.4`. If the resulting
prerelease shows a small esm.sh stub again, a narrower form like
`dist/**/*.css` is the follow-up to keep webpack happy.
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to
release/cdn-fix-alpha, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`release/cdn-fix-alpha` is currently in **pre mode** so this branch has
prereleases rather than normal releases. If you want to exit
prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @graphiql/react@0.37.6-alpha.1

### Patch Changes

- [#4308](#4308)
[`8ac17d1`](8ac17d1)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Revert the
`*.css` entry from `sideEffects` (added in #4211). The unbounded glob
landed in the same release where esm.sh's `?standalone` builder started
emitting a much larger preload stub that fragments `monaco-editor` into
two instances and breaks syntax highlighting on CDN consumers (#4303).
Removing it narrows the package.json delta between the last working
version (0.37.3) and the first broken one (0.37.4). A more
narrowly-scoped form may return in a follow-up if the webpack
tree-shaking issue from #4211 recurs.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
#4140 moved `react-compiler-runtime` from `peerDependencies` to
`dependencies` in `@graphiql/react`, `@graphiql/plugin-doc-explorer`,
and `@graphiql/plugin-history`. That change landed in 0.37.4 alongside
esm.sh's `?standalone` builder starting to emit a 115-line preload
stub that fragments `monaco-editor` into two instances and breaks
syntax highlighting on CDN consumers (#4303).

Move the dependency back to `peerDependencies` to narrow the
package.json delta between the last-working `0.37.3` and the
first-broken `0.37.4`. If the resulting prerelease shows a small
esm.sh stub again, this is the trigger.
Lockfile regeneration following the `react-compiler-runtime` move back
to `peerDependencies` in `598ffa3d`.
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to
release/cdn-fix-alpha, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`release/cdn-fix-alpha` is currently in **pre mode** so this branch has
prereleases rather than normal releases. If you want to exit
prereleases, run `changeset pre exit` on `release/cdn-fix-alpha`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @graphiql/plugin-doc-explorer@0.4.3-alpha.1

### Patch Changes

- [#4308](#4308)
[`598ffa3`](598ffa3)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move
`react-compiler-runtime` back to `peerDependencies` (revert of #4140).
The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's
`?standalone` builder starting to emit a 115-line preload stub that
fragments `monaco-editor` into two instances on CDN consumers (#4303).
Putting the dependency back in `peerDependencies` narrows the
package.json delta between the last-working `0.37.3` and the
first-broken `0.37.4`.

## @graphiql/plugin-history@0.4.3-alpha.1

### Patch Changes

- [#4308](#4308)
[`598ffa3`](598ffa3)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move
`react-compiler-runtime` back to `peerDependencies` (revert of #4140).
The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's
`?standalone` builder starting to emit a 115-line preload stub that
fragments `monaco-editor` into two instances on CDN consumers (#4303).
Putting the dependency back in `peerDependencies` narrows the
package.json delta between the last-working `0.37.3` and the
first-broken `0.37.4`.

## @graphiql/react@0.37.6-alpha.2

### Patch Changes

- [#4308](#4308)
[`598ffa3`](598ffa3)
Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move
`react-compiler-runtime` back to `peerDependencies` (revert of #4140).
The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's
`?standalone` builder starting to emit a 115-line preload stub that
fragments `monaco-editor` into two instances on CDN consumers (#4303).
Putting the dependency back in `peerDependencies` narrows the
package.json delta between the last-working `0.37.3` and the
first-broken `0.37.4`.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@trevor-scheer

Copy link
Copy Markdown
Contributor Author

This was an exploration branch that required actual (alpha) releases to npm to validate. I didn't find a solution on our side. The exploration continues here:
#4303 (comment)
#4303 (comment)

@trevor-scheer trevor-scheer deleted the release/cdn-fix-alpha branch May 20, 2026 21:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant